import { Meta, Story, Canvas } from "@storybook/blocks";

import { action } from '@storybook/addon-actions';
import { ViewPort, Fill } from "../../";
import { description } from "../Utils";
import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps } from "../Utils";

<CommonHeader />

<Meta title="React Spaces/Custom resize handles" />

## Custom resize handles

You can pass custom components to be used as resize handles using the `handleRender` prop.
This is an alternative to overriding the default css classes and will give you more control.

#### Applies to

`<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />`

#### Example

Pass a function to the `handleRender` prop that will be called for every resize handle on that component.

```tsx
<BottomResizable 
    size="50%" 
    handleRender={(props: IResizeHandleProps) => <div {...props}></div>}>
</BottomResizable>
```

You can determine the which type of handle is being rendered by accessing the `props.key` property. It will
contain values `left`, `top`, `right` or `bottom`. For example, you can render different handles for differently
positioned resize handles.

It's also important that you pass following props to the **top level** element for your custom component, if
you don't resizing will not work on mouse drag:

```tsx
onMouseDown: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;
```
